<template>
   <div class="pb50">
    <el-form
      size="small"
      ref="formRef"
      :model="form"
      label-width="150px"
      v-if="!loading"
    >
      <!--商品信息-->
      <Info :data="form"></Info> 

      <!--规格-->
      <Spec :data="form"></Spec> 

      <!--其它-->
      <Other :data="form"></Other>

      <!--提交-->
    </el-form>

    <div class="common-button-wrapper">
      <el-button size="small" type="info" @click="cancelFunc">取消</el-button>
      <el-button
        size="small"
        type="primary"
        @click="onSubmit"
        :loading="loading"
        >提交</el-button
      >
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, defineComponent } from "vue";
import { detailProduct, saveProduct } from "@/api/seckill";
import Info from "./part/Info.vue";
import Spec from "./part/Spec.vue";
import Other from "./part/Other.vue";

export default defineComponent({
  components:{
    Info,
    Spec,
    Other,
  },
  setup() {
    const state = reactive({
      loading: false,
      form: {
        /*商品ID*/
        seckill_product_id: 0,
        /*商品状态*/
        status: 10,
        /*商品名称*/
        product_name: "",
        /*图片*/
        product_image: "",
        /*排序*/
        sort: 100,
        /*规格*/
        product_sku_id: 0,
        /*限购数量*/
        limit_num: 1,
        /*商品表格*/
        tableData: [],
        /*活动名称*/
        active_name: "",
      },
    })
    const getData = ()=>{
      state.loading = true;
      detailProduct(
        {
          seckill_product_id: state.form.seckill_product_id,
        },
        true
      ).then((res) => {
        const { data: { model } } = res;
        state.form.product_name = model.product.product_name;
        state.form.product_image = model.product.image[0].file_path;
        state.form.product_id = model.product.product_id;
        state.form.limit_num = model.limit_num;
        state.form.stock = model.stock;
        state.form.active_name = model.active.title;
        model.seckillSku.forEach((item) => {
          item.product_name = state.form.product_name;
          item.spec_name = item.product_attr;
          item.spec_type = model.product.spec_type;
        });
        state.form.tableData = model.seckillSku;
        state.loading = false;
      });
    }
    return {
      ...toRefs(state),
      getData
    };
  },
  mounted(){
    this.form.seckill_product_id = this.$route.query.seckill_product_id;
    this.getData();
  },
  methods:{
    tableFormet(list){
      list.forEach((item) => {
        item.product_attr = item.spec_name;
      });
      return list;
    },
    cancelFunc() {
      this.$router.back(-1);
    },
    onSubmit(){
      this.$refs.formRef.validate((valid) => {
        if(valid){
          let params = {
            product: {},
          };
          params.product_id = this.form.product_id;
          params.status = this.form.status;
          params.sort = this.form.sort;
          params.limit_num = this.form.limit_num;
          params.seckill_product_id = this.form.seckill_product_id;
          params.product_id = this.form.product_id;
          params.product.spec_list = this.tableFormet(this.form.tableData);
          this.loading = true;
          saveProduct(params, true)
            .then((data) => {
              this.loading = false;
              ElMessage({
                message: "恭喜你，修改成功",
                type: "success",
              });
              this.cancelFunc();
            })
            .catch((error) => {
              this.loading = false;
            });
        }
      })
    }
  }
})
</script>

<style></style>